<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessage } from "element-plus";
import OnsiteSurveyDialog from '@/views/dataManage/components/OnsiteSurveyDialog.vue'
import { useOnsiteSurveyStore } from '@/stores/onsiteSurvey'
const onsiteSurveyStore = useOnsiteSurveyStore()    

const dialogVisible = ref(false)
const dialogMode = ref<'add' | 'edit' | 'detail'>('detail')
const currentForm = ref({
    id: '',
    name: '',
    region: [],
    type: '',
    buildYear: '',
    renovation: '',
    buildings: [],
    address: ''
  })


const tableData = ref<any[]>([]);
const pagination = reactive({
  currentPage: 1,
  pageSize: 8,
  total: 0
});

const getData = () => {
  // 模拟基本信息数据
  const mockData: any[] = onsiteSurveyStore.getData

  tableData.value = mockData;
  pagination.total = mockData.length;
};



// 计算当前页显示的数据
const currentPageData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  return tableData.value.slice(start, end);
});

const handleRowClick = (row: any) => {
  console.log('点击行数据:', row);
  dialogVisible.value = true
  dialogMode.value = 'detail'
  currentForm.value = row
  // 这里可以扩展为弹窗、跳转等
};

getData();
</script>

<template>
  <div class="right-center">
    <el-table
      :data="currentPageData"
      border
      height="100%"
      fit
      highlight-current-row
      style="width: 100%"
      size="small"
      :header-cell-style="{ background: 'rgba(0,0,0,0.8)', color: '#fff' }"
      @row-click="handleRowClick"
    >
        <el-table-column label="小区名称" prop="name" min-width="80" show-overflow-tooltip/>
        <el-table-column label="详细地址" prop="address" min-width="80" show-overflow-tooltip/>
        <el-table-column label="小区类型" prop="type" width="100" align="center" show-overflow-tooltip/>
        <el-table-column label="建造时间" prop="buildYear" width="100" align="center" show-overflow-tooltip/>
    </el-table>
    
    <OnsiteSurveyDialog
      v-model="dialogVisible"
      :mode="dialogMode"
      :formData="currentForm"
    />
  </div>
</template>

<style scoped lang="scss">
.right-center {
  height: 100%;
  padding-bottom: 10px;

  .el-table {
    background: transparent;
    :deep(.el-table__body-wrapper) {
      color: #fff;
      background: transparent;
    }
    
    :deep(.el-table__row) {
      cursor: pointer;
      background: transparent;
      height: 48px;
      
 
    }

    :deep(.el-table__body tr:hover > td), :deep(.el-table__body tr.current-row > td) {
      background-color: #12132D !important;
      color: #fff !important;
    }
  }
}
</style>
